<template>
	<view class="shoplist">

		<view class="white_b customer-info r-5">
			<view class="align_center select-address" @click="modifyAddress">
				<view class="">
					<image src="../../static/img/shoplistadd.png"></image>
				</view>
				<view class="detail-address">
					<view class="" v-if="myAddress.area">
						<text v-if="myAddress.province">{{myAddress.province}}</text>
						<text v-if="myAddress.city">{{myAddress.city}}</text>
						<text v-if="myAddress.area">{{myAddress.area}}</text>
						<text v-if="myAddress.address">{{myAddress.address}}</text>
					</view>
					<view v-else>
						请先添加用餐地点
					</view>
					<view class="fs-13" style="margin-top: 10rpx;">
						<text v-if="myAddress.shou_name">{{myAddress.shou_name}}</text>
						<text v-if="myAddress.shou_phone" style="margin-left:20rpx;">{{myAddress.shou_phone}}</text>
					</view>
				</view>
				<view>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>
			</view>
			<view class="flex_left_right align_center" style="margin-top:30rpx;">
				<view class="bold">用餐时间</view>
				<view class="align_center gray_font" @click="open">

					{{timeText}}

					<text class="iconfont iconfanhui t-180"></text>
				</view>
			</view>
			<view class="flex_left_right align_center" style="margin-top:30rpx;">
				<view class="bold">用餐桌数</view>
				<view class="align_center gray_font">
					<u-number-box :min="1" v-model="num" @change="valChange"></u-number-box>
				</view>
			</view>
		</view>
		<view class="shop white_b r-5 all-good">
			<view v-for="(item,index) in shop" :key="index">
				<view class="flex">
					<image class="have_img r-5" :src="imgRemote+item.goods.main_image" mode="aspectFit"></image>
					<view class="include_delete  flex_left_right flex-full">
						<view class="info">
							<view style="width:100%;">
								<view class="bold two-line">{{item.goods.name}}</view>
								<view style="margin-top: 20rpx;" class="flex_left_right">
									<text
										class="gray_font fs-11">￥{{item.sku.market_price}}/{{item.sku.unit}}（{{item.sku.guige}}）</text>
									<text class="bold " style="margin-top:-8rpx;">
										￥{{$fixed(item.sku.market_price)}}
									</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="flex_left_right" style="margin-top: 30rpx;">
				<text>单桌餐标(不包含酒水)</text>
				<text>￥{{$fixed(shop[0].sku.market_price)}}</text>
			</view>

			<!-- <view class="flex_left_right " style="margin-top: 30rpx;" @click="useQuan" v-if="isUseQuan">
				<text>优惠券</text>
				<view>
					<text v-if="quanInfo.discount_money>0">￥{{$fixed(quanInfo.discount_money)}}</text>
					<text v-else style="color:gray;font-size:28rpx;">请选择优惠券</text>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>

			</view>
			<view class="flex_left_right " style="margin-top: 30rpx;" v-else>
				<text>优惠券</text>
				<view>

					<text style="color:gray;font-size:28rpx;">暂无优惠券可用</text>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>

			</view> -->
			<view class="total-price">
				<text class="fs-11">合计：</text>
				<text class="red-font bold">￥{{$fixed(totalPrice-quanInfo.discount_money)}}</text>
			</view>
		</view>
		<view class="white_b padding-15 r-5 blank" style="margin:30rpx;">
			<view class="align_center order-remark">
				<text style="width:160rpx;">订单备注</text>
				<input v-model="remark" placeholder="选填" class="flex-full" />
			</view>

		</view>
		<view class="white_b pay-method ">
			<view class="way bold padding-15">支付方式</view>
			<radio-group class="radio-pay" @change="payWay">
				<!-- <view class="flex_left_right align_center">
					<view class="align_center">
						<text class="iconfont iconweixinzhifu" style="color:#09BB07;"> </text>
						<text class="bold fs-13">微信支付</text>
					</view>
					<radio value="wxpay" checked="true" style="transform:scale(0.7)" color="#FF7133" />
				</view> -->
				<view class="border-color">

				</view>
				<view class="flex_left_right remain-money">
					<view class="align_center">
						<text class="iconfont iconfeiyong" style="color:#FFB92C;"> </text>
						<text class="bold fs-13">余额支付</text>
						<text class="fs-11 gray_font"
							style="margin-left:4rpx;">(可用￥{{$fixed(addressInfo.money)}})</text>
					</view>
					<radio value="money" style="transform:scale(0.7)" color="#FF7133"
						:disabled="(totalPrice-quanInfo.discount_money)>addressInfo.money?true:false" />
				</view>
				<view class="border-color">

				</view>
				<!-- <view class="flex_left_right remain-money">
					<view class="align_center">
						<text class="iconfont iconxianxiazhifu" style="color:#FFB92C;font-size: 24rpx;margin:0 28rpx 0 8rpx;"> </text>
						<text class="bold fs-13">线下支付</text>

					</view>
					<radio value="offline" style="transform:scale(0.7)" />
				</view> -->
			</radio-group>
		</view>
		
		<view class="pay-method xy_box">
			
			*注意事项
			
			<div class='xy_content'>
				
				<rich-text :nodes="xy"></rich-text>
				
			</div>
			
		</view>
		
		<view style="height:60px;">

		</view>
		<view class="fixed-bottom white_b width" :class="[system=='ios'?'pm':'']">
			<view class="align_center price-info">
				<view>
					<text class="fs-13">合计：</text>
					<text class="bold red-font">￥{{$fixed(totalPrice-quanInfo.discount_money)}}</text>
				</view>
				<view class="pay-button" @click="$doubleClick(pay)">支付</view>
			</view>

		</view>
		<passkeyborad :show="show" @complte="moneyPay" @close="show=false" :price="price"></passkeyborad>
		<uvdatetimepicker @confirm="timeconfirm" :filter="filter" :minDate="stime" :maxDate="etime"
			:formatter="formatter" ref="datetimePicker" v-model="time" mode="datetime"></uvdatetimepicker>
	</view>
</template>

<script>
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'

	import uvdatetimepicker from "@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue";

	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			gppDatePicker,
			passkeyborad,
			uvdatetimepicker
		},
		data() {
			return {
				startDate: "2021-05-15",
				endDate: "2022-09-09",
				pickerDate: '2021-05-16',
				visible: false,
				addressInfo: {},
				myAddress: {},
				imgRemote: imgRemote,
				shop: [],
				totalPrice: '',
				visible: false,
				freight: '',
				showSwitch: false,
				pay_type: 'wxpay',
				remark: '',
				receiving: '',
				show: false,
				showPay: 0,
				pay_password: '',
				price: '',
				quanInfo: {
					discount_money: 0,
					record_id: ''
				},
				hasAddress: false,
				isUseQuan: false,
				system: '',
				type: 1,
				ps_type: 1,
				wz: [],
				num: 1,
				timeShow: false,
				time: '',
				timeText: '请选择',
				stime: '',
				etime: '',
				yc_time:'',
				xy:''
			}
		},
		methods: {
			valChange(e){
				this.totalPrice=e.value*this.shop[0].sku.market_price;
			},
			filter(type, options) {
				if (type === 'hour') {
					let op = [];
					options.forEach(e => {

						if (Number(e) >= 10 && Number(e) <= 20) {
							op.push(e);
						}

					});

					return op;
				}
				return options;
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {


					return `${value}时`



				}
				if (type === 'minute') {
					return `${value}分`
				}


			},
			open() {
				this.$refs.datetimePicker.open();
			},
			timeconfirm(e) {    
				this.timeText = this.$project.changeTime(e.value, 3, 2);
                this.yc_time=e.value;
				console.log('confirm', e);
			},
			getPs(type) {
				this.ps_type = type;
				this.getFreight();
			},
			toPath() {
				uni.navigateTo({
					url: '/pages/shopcart/shop'
				})
			},
			confirm() {
				this.$refs.uModal.clearLoading();
				if (!this.username) {
					this.$Toast('请填写姓名');
					return;
				}
				if (!this.mobile) return this.$Toast('请填写电话');
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!reg.test(this.mobile)) {
					this.$Toast('请输入正确的电话', );
					return;
				}
				this.user.username = this.username;
				this.user.mobile = this.mobile;
				this.userShow = false;
			},
			markertap(e) {
				this.wz.default = this.wz.markers[e.markerId];
			},
			openMap() {
				let _ = this;
				uni.openLocation({
					latitude: _.wz.default.latitude,
					longitude: _.wz.default.longitude,
					name: _.wz.default.name,
					address: _.wz.default.site,
					complete(res) {
						console.log(res)
					}
				})
			},
			getLuck() {
				let params = {
					page: 1,
					limit: 20,
					type: 1
				};
				this.$get(this.$api.cMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {

						if (!data.data.data && data.data.data.length < 1) {
							uni.setStorageSync('quanInfo', '');
							this.quanInfo.record_id = '';
							this.quanInfo.discount_money = '0.00'
						}

						let time = new Date() - 0;

						data.data.data.map((item) => {
							if (item.info.use_timedata == 2) {
								if (new Date(item.info.use_time_info.start_time) - 0 <= time && new Date(
										item.info.use_time_info.end_time) - 0 >= time && this.totalPrice -
									item.info.satisfy_money >= 0
								) {
									item.use = true;
								} else {
									item.use = false;
								}
							} else {
								if (item.be_time * 1000 >= time && this.totalPrice - item.info
									.satisfy_money >= 0
								) {
									item.use = true;
								} else {
									item.use = false;
								}
							}

							return item
						})
						this.isUseQuan = data.data.data.some((item) => {
							return item.use == true
						});
						console.log(this.isUseQuan)
					}
				})
			},

			useQuan() {
				uni.navigateTo({
					url: '/pages/coupons/useCoupons?totalPrice=' + this.totalPrice
				})
			},
			getTomorrow() {
				function format(dest) {
					return dest < 10 ? '0' + dest : dest;
				}

				let arg = new Date(new Date() - 0 + 3600000 * 24);
				let endArg = new Date(new Date() - 0 + 3600000 * 24 * 7);
				let year = arg.getFullYear();
				let month = arg.getMonth() + parseInt(1);
				let day = arg.getDate();
				let endyear = endArg.getFullYear();
				let endmonth = endArg.getMonth() + parseInt(1);
				let endday = endArg.getDate();
				this.startDate = `${year}-${format(month)}-${format(day)}`;
				this.pickerDate = `${year}-${format(month)}-${format(day)}`;
				this.endDate = `${endyear}-${format(endmonth)}-${format(endday)}`;
			},
			confirmDate(e) {
				this.pickerDate = e.dateValue;
			},
			payWay(e) {
				this.pay_type = e.detail.value;
			},
			confirmPay() {
				let _ = this;
				let ids = '';
				for (let i of _.shop) {
					if (i.checked == true) {
						ids += i.id + ','
					}
				}
				let newId = ids.substring(0, ids.length - 1);
				let {

					tax_name,
					tax_num
				} = _.addressInfo;

				let {
					province,
					city,
					area,
					address,
					shou_name,
					shou_phone,
					id
				} = _.myAddress;

			
					if (!area) {
						return _.$Toast('请先填写收货地址');
					}
					if (!shou_name &&
						!shou_phone) {
						return _.$Toast('请先填写收货人和收货人电话');
					}
					
					
					if(!_.yc_time){
						return _.$Toast('请选择用餐时间');
					}
				

				uni.login({
					provider: 'weixin',
					success(res) {
						let params = {
							token: uni.getStorageSync('userToken'),
							province: province,
							city: city,
							area: area,
							address_id:id,
							address: address,
							shou_name: shou_name,
							shou_phone: shou_phone,
							tax_name: tax_name,
							tax_num: tax_num,
							cart_ids: newId,
							freight: _.freight,
							pay_type: _.pay_type,
							total: _.$fixed(_.totalPrice - _.quanInfo.discount_money),
							remark: _.remark,
							// delivery_time: _.pickerDate,
							code: res.code,
							record_id: _.quanInfo.record_id,
							type: _.type,
							ps_type: _.ps_type,
							num:_.num,
							yc_time:_.yc_time
							
						};
						// if( _.quanInfo.record_id){
						// 	params.record_id= _.quanInfo.record_id
						// }
						if (_.pay_type == 'money') {
							params.pay_password = _.pay_password;
						}
						if (_.type == 2) {
							params.shop = _.shop;
						}

					

						_.$post(_.$api.orderAdd_order, params, (res1) => {
							let data = res1.data;
							if (data.code == 1) {
								uni.removeStorageSync('quanInfo')
								if (_.pay_type != 'wxpay') {
									_.$Toast('提交订单成功');
									setTimeout(() => {
										uni.setStorageSync('quanInfo', '');
										uni.reLaunch({
											url: './paySuccess',
											success() {
												getApp().globalData.isReload = true;
											}
										})
									}, 1000)
								} else {
									// if(!uni.getStorageSync('userInfo').openid){
									// 	setTimeout(()=>{
									// 		uni.navigateTo({
									// 			url:'/pages/account/login'
									// 		})
									// 	},1000)
									// 	return _.$Toast('请先登录微信，再绑定');
									// }
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: data.data.timeStamp,
										nonceStr: data.data.nonceStr,
										package: data.data.package,
										signType: data.data.signType,
										paySign: data.data.paySign,
										success: function(res) {
											_.$Toast('支付成功');
											setTimeout(() => {
												uni.setStorageSync('quanInfo', '');
												uni.reLaunch({
													url: './paySuccess',
													success() {
														getApp().globalData
															.isReload = true;
													}
												})
											}, 500)

										},
										fail: function(err) {
											_.$Toast('支付取消');
											setTimeout(() => {
												uni.reLaunch({
													url: './paySuccess',
													success() {
														getApp().globalData
															.isReload = true;
													}
												})
											}, 500)
										}
									});
								}


							} else {

								if (_.pay_type == 'money' && data.msg == "支付密码错误") {
									uni.showModal({
										title: '',
										content: '支付密码错误,请重试',
										cancelText: '忘记密码',
										confirmColor: '#FF7133',
										success(res) {
											if (res.confirm) {
												_.show = true;
											} else if (res.cancel) {
												uni.navigateTo({
													url: '/pages/user/forgetPay'
												})
											}
										}
									})
								} else {
									_.$Toast(data.msg);
								}
							}
						});
					}
				})

			},

			pay() {
				if (this.hasAddress == 0 && this.ps_type == 1) {
					this.modifyAddress();
					return this.$Toast('请先添加收货地址');
				}
				if (this.pay_type == 'wxpay') {
					this.confirmPay();
				} else {
					if (this.showPay == 1) {
						this.show = true;
						this.price = this.totalPrice + parseFloat(this.freight) - this.quanInfo.discount_money
					} else {
						this.$showModal('是否设置支付密码', (res) => {
							uni.navigateTo({
								url: '/pages/user/setPay'
							})
						})
					}
				}

			},
			isSetPwd() {
				let that = this;
				that.$get(that.$api.userIsset_pay_password, {
					token: uni.getStorageSync('userInfo').token
				}, (res) => {
					this.showPay = res.data.data;
				})
			},
			moneyPay(e) {
				this.pay_password = e;
				this.confirmPay();
			},
			switchChange(e) {
				this.showSwitch = e.target.value;
			},

			modifyAddress() {
				uni.navigateTo({
					url: '/pages/addressMange/index'
				})
			},

			// 邮费
			getFreight() {
				this.$get(this.$api.mainFreight, {
					type: this.ps_type
				}, (res) => {
					let data = res.data;
					if (data.code == 1) {

						this.freight = this.totalPrice > data.data.over ? 0 : data.data.freight;
						this.xy=data.data.xy;
					}
				});
			},
			getAddress() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.addressInfo = data.data;
					}
				})
			},
			defaultAddress() {
				let params = {
					token: uni.getStorageSync('userToken'),
					limit: 1000
				}
				this.$get(this.$api.aMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let info = data.data.data.filter((item) => {
							return item.is_check == 2;
						})
						this.hasAddress = info.length;
						this.myAddress = info[0];
						if (this.hasAddress == 0) {
							this.myAddress = {}
						}

					}
				})
			},
			getla() {
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopList, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.wz = ress.data.data;
						})

					},
					fail(error) {
						_.$get(_.$api.shopList, {
							lng: '',
							lat: ''
						}, ress => {
							_.wz = ress.data.data;
						})
						console.log(error);
					}
				})
			},
			getUser() {
				let _ = this;
				_.$get(_.$api.userInfo, {
					token: uni.getStorageSync('userToken')
				}, res => {
					_.user = res.data.data;
					_.username = res.data.data.username;
					_.mobile = res.data.data.mobile;
					console.log(_.user, _.username, _.mobile);
				});
			},
			getStime() {

				// 获取当前时间
				var now = new Date();

				// 设置时间为明天的0时0分
				now.setDate(now.getDate() + 1);
				now.setHours(10, 0, 0, 0); // 设置小时、分钟、秒和毫秒为0

				// 获取时间戳（以毫秒为单位）
				var timestamp = now.getTime();
				this.stime = timestamp;
			},
			getEtime() {

				// 获取当前时间
				var now = new Date();

				// 获取当前月份的下一个月
				var nextMonth = now.getMonth() + 1;
				var nextYear = now.getFullYear();

				// 如果下一个月是12月，则年份需要加1，月份设置为0（表示1月）
				if (nextMonth === 12) {
					nextMonth = 0;
					nextYear++;
				}

				// 创建一个表示下个月第一天的Date对象
				var firstDayOfNextMonth = new Date(nextYear, nextMonth, 1);

				// 获取下个月的天数（根据下个月的第一天计算）
				var daysInNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth() + 1, 0)
					.getDate();

				var lastDayOfNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(),
					daysInNextMonth);

				// 获取时间戳（以毫秒为单位）
				var timestamp = lastDayOfNextMonth.getTime();
				this.etime = timestamp;
			}
		},
		onShow() {
			this.system = uni.getSystemInfoSync().platform;
			if (uni.getStorageSync('address')) {
				let useAddress = JSON.parse(uni.getStorageSync('address'));
				this.hasAddress = 1;
				console.log(useAddress)
				this.myAddress = useAddress;
			} else {
				this.defaultAddress();
			}

			this.isSetPwd();
			if (uni.getStorageSync('quanInfo')) {
				this.quanInfo = JSON.parse(uni.getStorageSync('quanInfo'));
				this.quanInfo.record_id = this.quanInfo.id;
				this.quanInfo.discount_money = this.quanInfo.info.discount_money
			} else {
				this.quanInfo.record_id = '';
				this.quanInfo.discount_money = '0.00'
			}
		
		},
		onLoad(e) {

			this.getStime();
			this.getEtime();

			if (e.type) {
				this.type = e.type;
			}
			this.getAddress();
			this.getTomorrow();
			this.shop = uni.getStorageSync('selectGoods');
			let sum = 0;
			for (let i of this.shop) {
				sum += i.buy_num * i.sku.market_price;
			}
			this.totalPrice = sum;
			this.getFreight();
			//this.getLuck();
		},
		onHide() {
			uni.removeStorageSync('address');
		}

	}
</script>

<style scoped lang="scss">
	.xy_box{
		box-sizing: border-box;
		padding: 20rpx 0;
	}
	.xy_content{
		margin-top: 10rpx;
	}
	.pm {
		padding-bottom: 45rpx;
	}

	input {
		margin-top: 3rpx;
	}

	.blank input {
		display: block;
	}

	.customer-info {
		image {
			width: 50rpx;
			height: 58rpx;
		}

		.select-address {
			border-bottom: 2px dashed #eee;
			padding-bottom: 30rpx;
		}

		margin:30rpx;
		padding: 30rpx;
	}

	.detail-address {
		width: 550rpx;
		padding: 0 0rpx 0 20rpx;
	}

	.all-good {
		padding: 0 30rpx;
		margin: 0 30rpx;
	}

	.single_good {
		padding-top: 30rpx;

		.good_img {
			width: 180rpx;
			height: 120rpx;
			margin-right: 30rpx;


		}
	}

	.have_img {
		width: 200rpx;
		height: 200rpx;
		margin: 30rpx 30rpx 0 0;
	}

	.total-price {
		border-top: 1px solid #eee;
		margin-top: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
	}

	.order-remark {
		height: 83rpx;


	}

	.pay-method {
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.radio-pay {
			padding: 0 16rpx 0 20rpx;
		}

		margin:0 30rpx;

		.way {
			height: 82rpx;
			line-height: 82rpx;
		}

		.iconfont {
			margin-right: 19rpx;
			font-size: 40rpx;
		}

		.border-color {
			border-top: 1px solid #EEE;
			margin: 20rpx 12rpx 20rpx 8rpx;
		}


	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		z-index: 99;

		.price-info {
			justify-content: flex-end;
			height: 49px;


			.pay-button {
				background: #FF7133;
				color: white;
				margin: 0 30rpx;
			}
		}
	}

	.tab_box {
		display: flex;
		align-items: center;
	}

	.tab_div {
		flex: 1;
		text-align: center;
	}

	.tab_text {
		box-sizing: border-box;
		padding: 0 0 20rpx 0;
	}

	.tab_check {
		color: #FF7133;
		border-bottom: 5rpx solid #FF7133;
	}

	.map_box {
		margin: 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 20rpx;
		position: relative;
	}

	.name_box {
		box-sizing: border-box;
		padding: 15rpx 0;
		font-size: 30rpx;
		margin-right: 15rpx;
	}

	.name_boxs {
		display: flex;
		align-items: center;
	}

	.map_site {
		margin: 0 0 16rpx 0;
		font-size: 26rpx;
		color: #9CA3B7;
	}

	.map_lx {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
		box-sizing: border-box;
		padding: 0 0 20rpx 0;
	}

	.mp_mobile {
		color: #2160DB;
	}

	.map_qh {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 0;
		font-size: 26rpx;

	}

	.map_u_m {
		display: flex;
		align-items: center;
	}

	.map_m {
		margin: 0 20rpx;
	}

	.dw_box {
		background-color: white;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 185rpx;
		left: 40rpx;
		border-radius: 15rpx;
	}

	.dw_img {
		width: 40rpx;
	}

	.slot-content {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.input_box {
		display: flex;
		align-items: center;


	}

	.i_b {
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		padding: 30rpx 0 30rpx 20rpx;
	}

	.i_mobile {
		box-sizing: border-box;
		padding: 30rpx 0 0 20rpx;
	}

	::v-deep .u-field {
		width: 400rpx;
		height: 80rpx;
	}
</style>